<template>
  <RenderTableColumn v-bind="column" />
</template>

<script setup lang="tsx" name="TableColumn">
import type { ColumnProps, RenderScope, HeaderRenderScope } from '@/components/proTable/interface';
import { util } from '@/utils';

defineProps<{ column: ColumnProps }>();

const slots = useSlots();

const enumMap = inject('enumMap', ref(new Map()));

// 渲染表格数据
const renderCellData = (item: ColumnProps, scope: RenderScope<any>) => {
  return enumMap.value.get(item.prop) && item.isFilterEnum
    ? util.filterEnum(
        util.handleRowAccordingToProp(scope.row, item.prop!),
        enumMap.value.get(item.prop)!,
        item.fieldNames,
      )
    : util.formatValue(util.handleRowAccordingToProp(scope.row, item.prop!));
};

// 获取 tag 类型
const getTagType = (item: ColumnProps, scope: RenderScope<any>) => {
  return (
    util.filterEnum(
      util.handleRowAccordingToProp(scope.row, item.prop!),
      enumMap.value.get(item.prop),
      item.fieldNames,
      'tag',
    ) || 'primary'
  );
};

const RenderTableColumn = (item: ColumnProps) => {
  return (
    <>
      {item.isShow && (
        <el-table-column
          {...item}
          align={item.align ?? 'center'}
          showOverflowTooltip={item.showOverflowTooltip ?? item.prop !== 'operation'}>
          {{
            default: (scope: RenderScope<any>) => {
              if (item._children) return item._children.map((child) => RenderTableColumn(child));
              if (item.render) return item.render(scope);
              if (item.prop && slots[util.handleProp(item.prop)]) return slots[util.handleProp(item.prop)]!(scope);
              if (item.tag) return <el-tag type={getTagType(item, scope)}>{renderCellData(item, scope)}</el-tag>;
              return renderCellData(item, scope);
            },
            header: (scope: HeaderRenderScope<any>) => {
              if (item.headerRender) return item.headerRender(scope);
              if (item.prop && slots[`${util.handleProp(item.prop)}Header`])
                return slots[`${util.handleProp(item.prop)}Header`]!(scope);
              return item.label;
            },
          }}
        </el-table-column>
      )}
    </>
  );
};
</script>
